<template>
	<view class="page-total">
		<view class="tab-list">
			<view class="list" v-for="(item,index) in TabBarList" @click="onTabBar(item,index)" :key="index">
				<image :src="item.acImg" v-show="tabBarShow === item.index"></image>
				<image :src="item.img" v-show="tabBarShow != item.index"></image>
				<text :class="{'action':tabBarShow===item.index}">{{item.name}}</text>
				<!-- <text>{{item.name}}</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabBarList: [
					{
						index: 1,
						name: '首页',
						img: '/static/tabber/index.png',
						acImg: '/static/tabber/index_act.png'
					},
					{
						index: 2,
						name: '分类',
						img: '/static/tabber/sort.png',
						acImg: '/static/tabber/sort_act.png'
					},
					{
						index: 3,
						name: '购物车',
						img: '/static/tabber/look.png',
						acImg: '/static/tabber/look_act.png'
					},
					{
						index: 4,
						name: '客服',
						img: '/static/tabber/tell.png',
						acImg: '/static/tabber/tell.png'
					},
					{
						index: 5,
						name: '我的',
						img: '/static/tabber/mine.png',
						acImg: '/static/tabber/mine_act.png'
					}
					
				],
				codeheight: 0,
				isOverall: 0,
				phoneModel: '',
			};
		},
		props: {
			tabBarShow: {
				type: Number,
				default: 0,
			}
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				let that = this;
				// 获取系统信息
				uni.getSystemInfo({
					success(res) {
						/**
						console.log(res.brand) //手机牌子
						console.log(res.model) //手机型号
						console.log(res.screenWidth) //屏幕宽度
						console.log(res.screenHeight) //屏幕高度
						*/
						that.codeheight = Math.round(res.screenHeight);
						that.phoneModel = res.model
						if (res.model.search('iPhone')) {
							that.isOverall = 0;
						} else if (Math.round(res.screenHeight) > 740) {
							that.isOverall = 1;
						}
						// console.log(that.isOverall);
					}
				});
			} catch (e) {
				// error
			}
		},
		methods: {
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			onTabBar(item, index) {
				// this.tabBarShow = item.index;
				//console.log(item, index, '点击了')
				switch (item.index) {
					case 1:
						uni.reLaunch({
							url: '/pages/index/index'
						})
						break;
					case 2:
						uni.reLaunch({
							url: '/pages/category/index'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/cart/index'
							// url: '/pages/look/index'
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/tell/index'
						})
						break;
					case 5:
						uni.reLaunch({
							url: '/pages/ucenter/index'
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-total {
		position: fixed;
		left: 0;
		z-index: 9999;
		bottom: -5px;
		width: 100%;
		padding-bottom: 30rpx;
		padding-top: 10rpx;
		background: #FFFFFF;
		border-top: 1.5px solid #DBDBDB;
		// height: 100rpx;
		box-shadow: 0rpx -3rpx 10rpx 0rpx rgba(66,157,250,0.3);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 30rpx;
	}

	.tab-list {
		border-radius: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 20%;
			height: 100rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				margin-top: 2rpx;
			}

			.action {
				color: #84E7E4;
				font-weight: bold;
			}
		}
	}
</style>